<template>
  <div>
    <!-- 上有轮播图 -->
    <my-swipe url="getlbts"/>
  <!-- 下有九宫格 -->
  <div class="grid">
    <my-ul>
        <my-li v-for="(module,index) in modules" :key="index">
          <router-link :to="module.route">
            <span :class="module.className">
              <img :src="module.imgAdd">
            </span>
            <div>{{module.title}}</div>
          </router-link>
            
          
        </my-li>
    </my-ul>
  </div>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data () {
    return {
      modules:[
        {title:'新闻资讯',className:'back-news',imgAdd:'../../static/image/callme.png',route:{name:'NewsList'}},
        {title:'图文分享',className:'back-news',imgAdd:'../../static/image/callme.png',route:{name:'PhotoList',query:{categoryId:0} }},
        {title:'商品展示',className:'back-news',imgAdd:'../../static/image/callme.png',route:{name:'GoodsShow',params:{page:1}}},
        {title:'留言反馈',className:'back-news',imgAdd:'../../static/image/callme.png',route:{name:'Home'}},
        {title:'搜索资讯',className:'back-news',imgAdd:'../../static/image/callme.png',route:{name:'Home'}},
        {title:'联系我们',className:'back-news',imgAdd:'../../static/image/callme.png',route:{name:'Home'}}
      ]
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.gird span{
  display: inline-block;
  margin: 10px 0;
  width: 50px;
  height: 50px;
  background-repeat: round; 
}
.back-img{
  background-image: url("../../static/image/aniu.png");
}
.back-news{
  background-image: url("../../static/image/callme.png");
}

</style>
